<template>
    <div>
      <el-card class="box-card" style="width: 95%">
       
        <el-form :inline="true" :model="formInline" class="demo-form-inline">

          <el-form-item class="top1">
            <template slot-scope="scope">
            <el-button  @click="showEditDialog(scope.row),dialog_add=true" type="primary"  icon="el-icon-plus">添加</el-button>
            </template>
          </el-form-item>
          <el-form-item class="top">
            <el-input v-model="search" placeholder="输入关键字搜索"/>
          </el-form-item>
        </el-form>
          <el-table
            :data="userList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" 
            border
            style="width: 100%;height: 500px">
            <el-table-column prop="id" label="id" width="50"></el-table-column>
            <el-table-column prop="name" label="name" width="180">   </el-table-column>
            <el-table-column prop="username" label="username" width="180"> </el-table-column>
            <el-table-column prop="password" label="password" width="300"> </el-table-column>
            <el-table-column prop="profile" label="profile" width="180"> </el-table-column>
            <el-table-column prop="role" label="role" width="50"> </el-table-column>
             <el-table-column label="操作">
              <template slot-scope="scope">
              <el-button @click="showEditDialog(scope.row),dialog_flag=true" type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
              <el-button @click="handleDelete(scope.row.id)" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

         <!--分页-->
         <el-pagination 
              background layout="prev, pager, next" 
              :total="pageInfo.total" :page-size="pageInfo.sumItem"
              @prev-click="handlePrevClick" @next-click="handleNextClick" @current-change="handleCurrentChange">
          </el-pagination>
         <!--编辑-->
           <el-dialog class="visiable_div" :visible.sync="dialog_flag" :closeOnClickModal="false" :showClose="false">
            <!--表单-->
            <el-form class="visible_form" :model="current_userList">
                <!--id-->
                <el-form-item label="id" label-width="100px">
                    <el-input class="id" v-model="current_userList.id"></el-input>
                </el-form-item>
                <!--name-->
                <el-form-item label="name" label-width="100px">
                    <el-input class="name" v-model="current_userList.name"></el-input>
                </el-form-item>
                <!--username-->
                <el-form-item label="username" label-width="100px">
                    <el-input class="username" v-model="current_userList.username"></el-input>
                </el-form-item>
                <!--password-->
                <el-form-item label="password" label-width="100px">
                    <el-input class="password" v-model="current_userList.password"></el-input>
                </el-form-item>
                <!--profile-->
                <el-form-item label="profile" label-width="100px">
                    <el-input class="profile" v-model="current_userList.profile"></el-input>
                </el-form-item>
                <!--role-->
                <el-form-item label="role" label-width="100px">
                    <el-input class="role" v-model="current_userList.role"></el-input>
                </el-form-item>
            </el-form>
            <!--页脚-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog_flag=false">取消</el-button>
                <el-button @click="Save" type="primary">更新</el-button>
            </div>        
           </el-dialog>

        <!--添加-->
          <el-dialog class="add_div" :visible.sync="dialog_add" :closeOnClickModal="false" :showClose="false">
            <!--表单-->
            <el-form class="add_form" :model="current_userList">
                <!--id-->
                <el-form-item label="id" label-width="100px">
                    <el-input class="id" ></el-input>
                </el-form-item>
                <!--name-->
                <el-form-item label="name" label-width="100px">
                    <el-input class="name" ></el-input>
                </el-form-item>
                <!--username-->
                <el-form-item label="username" label-width="100px">
                    <el-input class="username" ></el-input>
                </el-form-item>
                <!--password-->
                <el-form-item label="password" label-width="100px">
                    <el-input class="password" ></el-input>
                </el-form-item>
                <!--profile-->
                <el-form-item label="profile" label-width="100px">
                    <el-input class="profile" ></el-input>
                </el-form-item>
                <!--role-->
                <el-form-item label="role" label-width="100px">
                    <el-input class="role" ></el-input>
                </el-form-item>
            </el-form>
            <!--页脚-->
            <div slot="footer2" class="add-footer">
                <el-button @click="dialog_add=false">取消</el-button>
                <el-button @click="Save" type="primary">更新</el-button>
            </div>        
        </el-dialog>

      </el-card>
      
    </div> 
</template>

<script>

  export default {
    created(){
      this.getAllUser() //获得的所有用户
      this.selectItemsNumber() //获得用户个数
    },
    data() {
      return {
          userList:[], //用户集合
          pageInfo:{page:1,sumItem:3,total:0}, 
          dialog_flag:false,
          dialog_add:false,
          current_userList:{},
          search: '',
           formInline: {
        },
      }
    },
    
     
     methods: {
       //获取所有用户记录数
        async selectItemsNumber(){
        const{data:res} = await this.$http.get("/users/selectItemsNumber")
        console.log(res)
        this.pageInfo.total=res
        
      },
      //获取所有用户及去权限
        async getAllUser(){
          const{data:res} = await this.$http.post("/users/findAllUser",this.pageInfo)
          console.log(res)
             
             this.userList=res.data
         
      },
    
     
      //删除单个用户
        handleDelete(id){
            this.$confirm('将永久删除该用户且不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              
            }).then(async () => {
                //点击了确定
                const{data:res}=await this.$http.post("/users/deleteUser","id="+id)
                if(res.flag==0){
                    //判断当前页是否还有记录，如果没有记录则将页号-1
                    if(this.pageInfo.page!=1&&(this.userList.length-1)==0){
                        this.pageInfo.page=this.pageInfo.page-1
                    }
                    //解决当前记录为第一页的第一条，删除后仍存在的bug
                    if(this.pageInfo.page==1&&(this.userList.length-1)==0){
                        this.userList=[]
                    }
                    //刷新product页面
                    this.getAllUser()
                    //查询总个数
                    this.selectItemsNumber()
                    this.$message.success("删除成功！")
                }else{
                    this.$message.error("删除失败！")
                }
             

            }).catch(() => {
                //点击了取消
                this.$message("已取消")
            })
        }, 
     
       //将用户点击的用户的信息放入到data中
       showEditDialog(user){
            this.current_userList=user
            console.log(this.current_userList)
        },
        
       
       //用户点击了上一页
      handlePrevClick(current_page){
            this.pageInfo.page=current_page
            this.getAllUser() //刷新页面
        },
        //用户点击了下一页
        handleNextClick(current_page){
            this.pageInfo.page=current_page
            this.getAllUser() //刷新页面
        },
        //用户选择某页
        handleCurrentChange(current_page){
            this.pageInfo.page=current_page
            this.getAllUser() //刷新页面
        },
      /*  async Save(){
            const{data:res}=await this.$http.post("/user/update",this.current_userList)
            if(res.flag==0){
                thisgetAllUser() //刷新页面
                //清空上传图片信息
               
                this.$message.success("修改成功！")
            }else{
                this.$message.error("修改失败！")
            }
            this.dialog_flag=false
            this.$message.success("修改成功！")
        }*/
    }
  }
  
    
</script>

<style>
.top{
  width: 80%;
  text-align: right
}
</style>